<template>
    <div>
        <div class="center-all clearfix">
            <div class="income-title">
                <van-row>
                    <van-col span="8">
                        <img class="fl icon_return" src="../../assets/image/center/icon_return.png" alt=""
                             @click="$router.back(-1)">
                    </van-col>
                    <van-col span="8" class="text-align-c font-36">交易记录</van-col>
                    <van-col span="8" class="text-align-r">
                        <img class="icon_return" src="../../assets/image/center/icon_service_kf.png" alt="">
                    </van-col>
                </van-row>
            </div>
            <div class="income-list-box clearfix">
                <div class="income-list-tab">
                    <span class="fl font-28 color-6" :class="[tabIndex == index ? 'active' : '']"
                          v-for="(item,index) in tabArr" :key="index" @click="tabNum(index)">{{item}}</span>
                </div>
                <ul class="clearfix">
                    <li class="clearfix income-li" v-for="(item,index) in dataDiamondlog" :key="index" >
                        <div class="fl left-box">
                            <img v-if="item.type == 6" src="../../assets/image/center/icon_diamond1.png" alt="">
                            <img v-else src="../../assets/image/center/icon_consume.png" alt="">
                        </div>
                        <div class="fl right-box">
                            <span class="color-3 font-28">
                                <em class="fl">
                                    <i v-if="item.type == 11">充钻：
                                        <label v-if="item.payType==1">微信支付</label>
                                         <label v-else-if="item.payType==2">微信支付</label>
                                         <label v-else-if="item.payType==3">微信支付</label>
                                         <label v-else-if="item.payType==100">余额支付</label>
                                         <label v-else-if="item.payType==10">支付宝支付</label>
                                         <label v-else-if="item.payType==20">IOS充值</label>
                                    </i>
                                    <i v-if="item.type == 21">消费：礼物</i>
                                </em>
                                <em class="fr font-3 font-w5">

                                    <i v-if="item.type == 11"  class="color-default">+{{item.amount}}</i>
                                    <i v-if="item.type == 21">-{{item.amount}}</i>
                                </em>
                            </span>
                            <span class="color-3 font-24">
                                 <i v-if="item.type == 11">[充值钻石]</i>
                                <i v-if="item.type == 21">[钻石支付]</i>
                            </span>
                            <span class="color-9 font-24">
                             {{$time(item.createTime)}}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <van-popup v-model="isDatetime" position="bottom" :overlay="true">
            <van-datetime-picker v-model="currentDate" type="year-month" :formatter="formatter" @confirm="confirmData"
                                 @cancel="isDatetime = !isDatetime"/>
        </van-popup>
    </div>
</template>
<script>
    import apiHttp from '../../api/index'
    import { Toast } from 'vant'
    export default {
        data() {
            return {
                currentDate: new Date(),
                isDatetime: false,
                tabArr: ['全部', '充钻', '支出'],
                tabIndex: 0,
                dataDiamondlog:[],
                page:0,
                size:10,
                type:'',//11钻石充值,21消费钻石
            }
        },

        //页面加载
        mounted:function(){
            this.getUserDiamondlog('');
        },
        methods: {
            //我的钻石交易日志记录
            getUserDiamondlog(type) {
                let that = this;
                let data={
                    page:that.page,
                    size:that.size,
                    type:that.type,
                }
                apiHttp.apiCenter.getUserDiamondlog(data,resp=>{
                    if(resp.code==200){
                      /*  for(var p in resp.data.content){
                            resp.data.content[p].createTime =resp.data.content[p].createTime.split(".")[0];
                        }*/
                        that.dataDiamondlog=resp.data.content;
                    }else {
                        Toast(resp.message)
                    }
                })

            },
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`;
                } else if (type === 'month') {
                    return `${value}月`
                } else {
                    return value;
                }
            },
            confirmData(data) {
                let endvalue = new Date(data)
                this.isDatetime = !this.isDatetime
            },
            // tab切换
            tabNum(index) {
                let that = this;
                this.tabIndex = index
                if(index==0){
                    that.type='';
                }else if(index==1){
                    that.type='11';
                }else if(index==2){
                    that.type='21';
                }
                this.getUserDiamondlog(that.type)
            }
        }
    }
</script>

<style scoped>
    .center-all {
        width: 100%;
    }

    .income-title {
        padding: .2rem .6rem;
        width: calc(100% - 1.2rem);
        height: 1.36rem;
        line-height: 1.36rem;
    }

    .icon_return {
        width: .8rem;
        margin-top: .28rem;
    }

    .income-list-box {
        width: calc(100% - 1.2rem);
        padding: .2rem .6rem;
    }

    .income-list-tab {
        height: 1rem;
        line-height: 1rem;
        padding: .2rem;
    }

    .income-list-tab span {
        margin-right: .8rem;
        border-bottom: solid transparent .06rem;
        padding: 0 .16rem;
    }

    .active {
        color: #D84F4D;
        border-bottom: solid #D84F4D .06rem !important;
    }

    .income-li {
        padding: .3rem 0 0 0;
    }

    .left-box {
        height: 2rem;
        width: 15%;
    }

    .left-box img {
        width: 50%;
    }

    .right-box {
        width: 85%;
        height: 2.4rem;
        padding-bottom: .3rem;
        border-bottom: #f5f5f5 solid .04rem;
    }

    .right-box span {
        height: .8rem;
        line-height: .8rem;
        display: block;
    }
</style>